<template>
    <view class="tab-bar">
        <view class="tab-item" :class="{ active: active === 'home' }" @click="switchTab('home')">
            <image :src="active === 'home' ? '/static/icon/首页1.png' : '/static/icon/首页.png'" class="tab-icon"></image>
            <text class="tab-text">首页</text>
        </view>
        <view class="tab-item" :class="{ active: active === 'coupon' }" @click="switchTab('coupon')">
            <image :src="active === 'coupon' ? '/static/icon/卡券1.png' : '/static/icon/卡券.png'" class="tab-icon"></image>
            <text class="tab-text">卡券套餐</text>
        </view>
        <view class="tab-item" :class="{ active: active === 'order' }" @click="switchTab('order')">
            <image :src="active === 'order' ? '/static/icon/订单1.png' : '/static/icon/订单.png'" class="tab-icon"></image>
            <text class="tab-text">我的订单</text>
        </view>
        <view class="tab-item" :class="{ active: active === 'user' }" @click="switchTab('user')">
            <image :src="active === 'user' ? '/static/icon/个人1.png' : '/static/icon/个人.png'" class="tab-icon"></image>
            <text class="tab-text">个人中心</text>
        </view>
    </view>
</template>

<script>
export default {
    name: 'TabBar',
    props: {
        active: {
            type: String,
            default: 'home'
        }
    },
    methods: {
        switchTab(tab) {
            if (tab === this.active) return;

            // 使用全局事件，避免直接进行导航操作
            uni.$emit('tabChange', tab);
        }
    }
}
</script>

<style>
/* 底部导航栏 */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    display: flex;
    background-color: white;
    border-top: 1rpx solid #eee;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
    color: #999;
}

.tab-item.active {
    color: #6CAE75;
}

.tab-icon {
    width: 44rpx;
    height: 44rpx;
    margin-bottom: 6rpx;
}

.tab-text {
    margin-top: 2rpx;
}
</style>
